<template>
  <div class="aside">
    <div class="toggle-button" @click="toggleCollapse">
      <i v-if="isCollapse" class="el-icon-caret-right"></i>
      <i v-else class="el-icon-caret-left"></i>
    </div>
    <el-menu
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      :router="true"
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>主题乐园</span>
        </template>
        <el-menu-item index="/happyOcean">
          <i class="iconfont icon-haiyangkaifa" style="margin-right: 8px"></i>
          <span slot="title">欢乐海洋</span>
        </el-menu-item>
        <el-menu-item index="/dreamAvenue">
          <i class="iconfont icon-a-ziyuan61" style="margin-right: 8px"></i>
          <span slot="title">梦想大道</span>
        </el-menu-item>
        <el-menu-item index="/dessertKingdom">
          <i class="iconfont icon-tianpin" style="margin-right: 8px"></i>
          <span slot="title">甜品王国</span>
        </el-menu-item>
        <el-menu-item index="/happyTime">
          <i class="iconfont icon-shijian" style="margin-right: 8px"></i>
          <span slot="title">欢乐时光</span>
        </el-menu-item>
        <el-menu-item index="/speedWorld">
          <i class="iconfont icon-sudu" style="margin-right: 8px"></i>
          <span slot="title">极速世界</span>
        </el-menu-item>
        <el-menu-item index="/featherHeaven">
          <i class="iconfont icon-yongyan" style="margin-right: 8px"></i>
          <span slot="title">羽落天堂</span>
        </el-menu-item>
        <el-menu-item index="/yuguangIsland">
          <i class="iconfont icon-yu" style="margin-right: 8px"></i>
          <span slot="title">渔光岛</span>
        </el-menu-item>
        <el-menu-item index="/hurricaneBay">
          <i class="iconfont icon-huaban" style="margin-right: 8px"></i>
          <span slot="title">飓风湾</span>
        </el-menu-item>
        <el-menu-item index="/happyJiangcheng">
          <i class="iconfont icon-gucheng" style="margin-right: 8px"></i>
          <span slot="title">欢乐江城</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-s-ticket"></i>
          <span>优惠活动</span>
        </template>
        <el-menu-item index="/latestActivities">
          <i class="iconfont icon-huodong" style="margin-right: 8px"></i>
          <span slot="title">最新活动</span>
        </el-menu-item>
        <el-menu-item index="/annualRecommendation">
          <i class="iconfont icon-tuijian" style="margin-right: 8px"></i>
          <span slot="title">年度推荐</span>
        </el-menu-item>
        <el-menu-item index="/ticketDiscount">
          <i class="iconfont icon-youhuiquan" style="margin-right: 8px"></i>
          <span slot="title">票务优惠</span>
        </el-menu-item>
        <el-menu-item index="/personalTailor">
          <i class="iconfont icon-sirendingzhi" style="margin-right: 8px"></i>
          <span slot="title">私人订制</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-flag"></i>
          <span>玩转乐园</span>
        </template>
        <el-menu-item index="/openingHours">
          <i class="iconfont icon-rili" style="margin-right: 8px"></i>
          <span slot="title">开放时间</span>
        </el-menu-item>
        <el-menu-item index="/fareInformation">
          <i class="iconfont icon-youhuiquan" style="margin-right: 8px"></i>
          <span slot="title">票价信息</span>
        </el-menu-item>
        <el-menu-item index="/antiepidemic">
          <i class="iconfont icon-menu_fyzl" style="margin-right: 8px"></i>
          <span slot="title">防疫须知</span>
        </el-menu-item>
        <el-menu-item index="/trafficGuidance">
          <i class="iconfont icon-gongjiao" style="margin-right: 8px"></i>
          <span slot="title">交通指引</span>
        </el-menu-item>
        <el-menu-item index="/playIntroduction">
          <i class="iconfont icon-gonglve" style="margin-right: 8px"></i>
          <span slot="title">游玩攻略</span>
        </el-menu-item>
        <el-menu-item index="/cateringAccommodation">
          <i class="iconfont icon-canyin" style="margin-right: 8px"></i>
          <span slot="title">餐饮住宿</span>
        </el-menu-item>
        <el-menu-item index="/parkGoods">
          <i class="iconfont icon-shangpin" style="margin-right: 8px"></i>
          <span slot="title">园区商品</span>
        </el-menu-item>
        <el-menu-item index="/travelInstructions">
          <i class="iconfont icon-xuzhi" style="margin-right: 8px"></i>
          <span slot="title">游玩须知</span>
        </el-menu-item>
        <el-menu-item index="/rainSession">
          <i class="iconfont icon-rain" style="margin-right: 8px"></i>
          <span slot="title">雨天专场</span>
        </el-menu-item>
        <el-menu-item index="/nightIntroduction">
          <i
            class="iconfont icon-lkingboyewanyueliang"
            style="margin-right: 8px"
          ></i>
          <span slot="title">夜场攻略</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-info"></i>
          <span>关于我们</span>
        </template>
        <el-menu-item index="/newsAnnouncement">
          <i class="iconfont icon-gonggao" style="margin-right: 8px"></i>
          <span slot="title">新闻公告</span>
        </el-menu-item>
        <el-menu-item index="/knowUs">
          <i class="iconfont icon-guanyuwomen" style="margin-right: 8px"></i>
          <span slot="title">了解我们</span>
        </el-menu-item>
        <el-menu-item index="/businessCooperation">
          <i class="iconfont icon-shangwuhezuo" style="margin-right: 8px"></i>
          <span slot="title">商务合作</span>
        </el-menu-item>
        <el-menu-item index="/talentRecruitment">
          <i class="iconfont icon-zhaopin" style="margin-right: 8px"></i>
          <span slot="title">人才招聘</span>
        </el-menu-item>
        <el-menu-item index="/lostFound">
          <i
            class="iconfont icon-dibudaohanglan-"
            style="margin-right: 8px"
          ></i>
          <span slot="title">失物招领</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="/onlineBooking">
        <i class="el-icon-mobile-phone"></i>
        <span slot="title">在线订票</span>
      </el-menu-item>
      <el-menu-item index="/myOrder">
        <i class="el-icon-s-order"></i>
        <span slot="title">我的订单</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["isCollapse"]),
  },
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(["toggleCollapseVuex"]),
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 点击按钮
    toggleCollapse() {
      this.toggleCollapseVuex();
    },
  },
};
</script>

<style scoped lang="scss">
.aside {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-menu {
  border-right: none; // 解决左侧菜单边框线对不齐的问题
}

.toggle-button {
  background-color: #fff;
  border-bottom: 1px solid #cfdde6;
  font-size: 10px;
  line-height: 30px;
  color: #47484b;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;

  i {
    font-size: 18px;
  }
}

.toggle-button:hover {
  background-color: #ecf5ff;
}
</style>
